<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<title>Projection-"#{projectionBean.projection.movie.name}"</title>
</h:head>
<h:body>

	<ui:include src="template.xhtml" />

	<br />

	<h:form id="seatsForm">

		<p:growl id="msg" showDetail="true" escape="false" />


		<h:commandButton value="Pay for seats"
			rendered="#{UserSessionBean.user.role == 'user' }"
			action="#{projectionBean.payForSeats()}">
		</h:commandButton>

		<p:fieldset legend="Seats" style="flow:left">

			<div style="float: left; overflow: auto;">

				<div style="display: inline-block; vertical-align: top">
					<p:dataGrid value="#{projectionBean.rowsAlphabet}" var="letter"
						columns="1" style="display: inline-block;">

						<p:column>

							<p:panel id="pnl" style="text-align:center; height:55px">

							#{letter}

							</p:panel>

						</p:column>

					</p:dataGrid>
				</div>
				<div style="display: inline-block; vertical-align: top">

					<!-- user -->

					<p:dataGrid id="allSeats" var="seat"
						value="#{projectionBean.seats}"
						columns="#{projectionBean.seatsPerRow}"
						rendered="#{UserSessionBean.user.role == 'user' }">

						<p:column>

							<p:panel id="pnl" style="text-align:center">

								<p:commandButton value="X" disabled="#{true}"
									rendered="#{(seat.seat.user.id != UserSessionBean.user.id and seat.locked == true) or seat.seat.sold==true}" />


								<h:commandButton value="#{seat.seat.id.seatNumber}"
									style="height:37px;"
									rendered="#{seat.locked == false and seat.seat.sold==false}">
									<f:setPropertyActionListener
										target="#{projectionBean.selectedSeat}" value="#{seat}" />
								</h:commandButton>


								<h:commandButton value="R"
									style="height:37px;background-color:green"
									rendered="#{(seat.seat.user.id == UserSessionBean.user.id and seat.locked == true) and seat.seat.sold==false}">
									<f:setPropertyActionListener
										target="#{projectionBean.selectedSeat}" value="#{seat}" />
								</h:commandButton>



							</p:panel>

						</p:column>

					</p:dataGrid>


					<!-- employee -->


					<p:dataGrid var="seat" value="#{projectionBean.seats}"
						columns="#{projectionBean.seatsPerRow}"
						rendered="#{UserSessionBean.user.role == 'employee' }">

						<p:column>

							<p:panel style="text-align:center">

								<h:commandButton value="#{seat.seat.id.seatNumber}"
									style="height:37px;" disabled="#{true}"
									rendered="#{(seat.locked == true or seat.seat.sold==true) and seat.seat.attended == false }">
								</h:commandButton>

								<h:commandButton value="#{seat.seat.id.seatNumber}"
									style="height:37px;background-color:green" disabled="#{true}"
									rendered="#{(seat.seat.sold==true) and seat.seat.attended == true }">
								</h:commandButton>


								<h:commandButton value=" " style="height:37px;"
									disabled="#{true}" rendered="#{(seat.seat.sold==false) }">
								</h:commandButton>


							</p:panel>

						</p:column>

					</p:dataGrid>




				</div>


				<div style="display: inline-block; vertical-align: top">


					<p:pickList value="#{projectionBean.users}"
						var="userName" effect="bounce" itemValue="#{userName}"
						itemLabel="#{userName}" showSourceControls="true"
						showTargetControls="true" showCheckbox="true"
						showSourceFilter="true" showTargetFilter="true"
						filterMatchMode="contains"
						rendered="#{UserSessionBean.user.role == 'employee' }">

						<f:facet name="sourceCaption">All who bought</f:facet>
						<f:facet name="targetCaption">Attended one</f:facet>

						<p:ajax event="transfer" listener="#{projectionBean.onTransfer}"
							update="msg" />


						<p:column style="width:75%;">
            					#{userName}
        					</p:column>

					</p:pickList>


					<p:commandButton id="pojoSubmit" value="Submit"
						update="displayThemes" oncomplete="PF('themesDialog').show()"
						style="margin-top:5px" />


					<p:dialog modal="true" showEffect="fade" hideEffect="fade"
						widgetVar="themesDialog">
						<h:panelGrid id="displayThemes" columns="2">
							<h:outputText value="Source: " style="font-weight:bold" />
							<ui:repeat value="#{projectionBean.users.source}" var="theme">
								<h:outputText value="#{theme}" style="margin-right:5px" />
							</ui:repeat>

							<h:outputText value="Target: " style="font-weight:bold" />
							<ui:repeat value="#{projectionBean.users.target}" var="theme">
								<h:outputText value="#{theme}" style="margin-right:5px" />
							</ui:repeat>
						</h:panelGrid>
					</p:dialog>



				</div>


			</div>

		</p:fieldset>

	</h:form>


</h:body>
</html>